<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>

    <title>yblog</title>
    <!-- 依 赖 样 式 -->
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
    <!--timeline-->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">-->


    <!--    <link rel="stylesheet" th:href="@{/plugins/vali/css/main.css}">-->
    <!--    不能使用bootstrap3，不然可能会导致页面效果不好，因为这个页面是通过bootstrap4来写的-->
    <link th:href="@{/assets/index2/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/index2/css/cl-css.css}" rel="stylesheet">
    <link th:href="@{/assets/index2/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/index2/highlight/styles/railscasts.css}">

    <script th:src="@{/assets/index2/jquery/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src="@{/assets/index2/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/index2/highlight/highlight.pack.js}"></script>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_v7p87hrx9q.css">

    <style>
        /*body {*/
        /*    height: 100vh;*/
        /*    font-family: "Open Sans", sans-serif;*/
        /*    !* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bea2e7+0,86b7e7+100 *!*/
        /*    background: #bea2e7;*/
        /*    !* Old browsers *!*/
        /*    background: -moz-linear-gradient(top, #bea2e7 0%, #86b7e7 100%);*/
        /*    !* FF3.6-15 *!*/
        /*    background: -webkit-linear-gradient(top, #bea2e7 0%, #86b7e7 100%);*/
        /*    !* Chrome10-25,Safari5.1-6 *!*/
        /*    background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);*/
        /*    !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
        /*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea2e7', endColorstr='#86b7e7',GradientType=0 );*/
        /*    !* IE6-9 *!*/
        /*}*/
        .container1 ul {
            margin: 0;
            margin-top: 25px;
            list-style: none;
            position: relative;
            padding: 1px 100px;
            color: #fff;
            font-size: 13px;
        }

        .container1 ul:before {
            content: "";
            width: 1px;
            height: 100%;
            position: absolute;
            border-left: 2px dashed #fff;
        }

        .container1 ul li {
            position: relative;
            margin-left: 30px;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 14px;
            border-radius: 6px;
            width: 250px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
        }

        .cl-card-more {
            width: 555px;
            height: 25.8px;
            float: left;
        }

        .like {
            float: left;
            width: 45.65px;
            height: 24.8px;
        }
    </style>
</head>
<body>
<div class="cl-header container-fluid">
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img th:if="${setting} eq null or ${setting.logo} eq null or ${setting.logo} eq ''"
                     th:src="@{/user/img/bloglogo.jpg}" width="144" height="72" alt="">
                <img th:if="${setting} ne null and ${setting.logo} ne null and ${setting.logo} ne ''"
                     th:src="@{${setting.logo}}" width="144" height="72" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">


                    <li class="nav-item">
                        <div id="searchbox" class="navbar-search" style="height: 40px;">
                            <span class="icon-search" onclick="submitData()"></span>
                            <form id="form" role="search" th:action="@{/search/1}">
                           <span class="search-box">
                                <input style="height: 40px;" type="text" name="searchText" id="search-inp" class="input"
                                       placeholder="全站搜索..."
                                       maxlength="30"
                                       autocomplete="off"/>
                          </span>
                                <input style="height: 40px;" type="button" value="搜索" onclick="submitData()">
                            </form>
                        </div>
                    </li>


                    <li th:if="${indexAc} ne null" class="nav-item active">
                        <a class="nav-link" th:href="@{/page/1}">首页<span class="sr-only"></span></a>
                    </li>
                    <li th:if="${indexAc} eq null" class="nav-item">
                        <a class="nav-link" th:href="@{/page/1}">首页<span class="sr-only"></span></a>
                    </li>
                    <li  class="nav-item ">
                        <a class="nav-link" th:href="@{/category/list}">分类<span class="sr-only"></span></a>
                    </li>

                    <li th:if="${archiveAc} ne null" class="nav-item active">
                        <a class="nav-link" th:href="@{/archive/list}">归档<span class="sr-only"></span></a>
                    </li>
                    <li th:if="${archiveAc} eq null" class="nav-item">
                        <a class="nav-link" th:href="@{/archive/list}">归档<span class="sr-only"></span></a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/admin/}" target="_blank">后台管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/toregister}">注册</a>
                    </li>
                    <form name="logoutform" th:action="@{/logout}" method="post"></form>
                    <li class="nav-item">
                        <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/loginPage}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" sec:authorize="isAuthenticated()"
                           href="javascript:document.logoutform.submit();">
                            退出
                        </a>
                    </li>


                </ul>
            </div>
        </nav>
    </div>
</div>


<div class="cl-cantainer container">
    <div class="row">
        <div class="col-md-9 cl-left">

            <div class="cl-card" th:each="article: ${articles}" th:if="${isArchive} eq null or ${isArchive} eq ''">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image"><a
                            th:href="${commons.permalink(article.id)}" target="_blank">
                        <img th:src="@{${commons.show_thumb(article)}}" class="img-fluid" alt=""></a>
                    </div>
                    <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                        <h3 class="cl-card-main-title">
                            <a th:href="${commons.permalink(article.id)}" th:utext="${article.title}" target="_blank">
                            </a>
                        </h3>
                        <p class="cl-card-main-info" th:utext="${commons.intro(article,75)}">
                        </p>
                        <div class="cl-card-more"><a th:href="${commons.permalink(article.id)}" target="_blank">阅读更多...</a>
                            &nbsp;&nbsp;&nbsp;<span th:text="'发布于 '+ ${commons.dateFormat(article.created)}"></span>
                        </div>
                        <!--                        点赞-->
                        <!--                        说明没有点赞，或者没登入帐号-->
                        <span th:if="${likeService.selectLikeExsit(user,article.id)} eq null" class="like"><a
                                th:id="'alike'+${article.id}" + href="#" class="iconfont icon-dianzan"
                                th:onclick="lk([[${article.id}]])"></a>&nbsp;<span
                                th:id="'likecount'+${article.id}"
                                th:text="${articleService.selectLikeCount(article.id)}"></span></span>

                        <!--                        说明已经点赞，把点赞图标变红-->
                        <span th:if="${likeService.selectLikeExsit(user,article.id)} ne null" class="like"><a
                                th:id="'alike'+${article.id}" + href="#" style="color: red"
                                class="iconfont icon-dianzan"
                                th:onclick="lk([[${article.id}]])"></a>&nbsp;<span
                                th:id="'likecount'+${article.id}"
                                th:text="${articleService.selectLikeCount(article.id)}"></span></span>

                    </div>
                </div>
            </div>

<!--            文章分页-->
            <nav aria-label="Page navigation example" th:if="${isArchive} eq null or ${isArchive} eq ''">
                <ul class="pagination justify-content-center">

                    <li th:if="${pageInfo.pageNum!=1}" class="page-item">
                        <a class="page-link" th:href="@{'/page/'+${pageInfo.pageNum-1}}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:if="${pageInfo.pageNum==1}" class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>


                    <div th:each="index:${#numbers.sequence(pageInfo.pageNum, pageInfo.pageNum+7)}"
                         th:if="${pageInfo.getPages()>=7}">
                        <li th:if="${pageInfo.pageNum==index} and ${index<=pageInfo.pages}" class="page-item active">
                            <a class="page-link" th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                        </li>
                        <li th:if="${pageInfo.pageNum!=index} and ${index<=pageInfo.pages}" class="page-item">
                            <a class="page-link" th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                        </li>
                    </div>


                    <div th:each="index:${#numbers.sequence(1, pageInfo.getPages())}" th:if="${pageInfo.getPages()<8}">
                        <li th:if="${pageInfo.pageNum==index}" class="page-item active">
                            <a class="page-link" th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                        </li>
                        <li th:if="${pageInfo.pageNum!=index}" class="page-item">
                            <a class="page-link" th:href="@{'/page/'+${index}}" th:text="${index}"></a>
                        </li>
                    </div>


                    <li class="page-item" th:if="${pageInfo.pageNum!=pageInfo.pages}">
                        <a class="page-link" th:href="@{'/page/'+${pageInfo.pageNum+1}}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li th:if="${pageInfo.pageNum==pageInfo.pages}" class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li>
                        第<input id="t1" type="text" style="width: 40px;height: 30px;">页
                        <input id="b1" type="button" onclick="toPage()" value="跳转">
                    </li>
                    <li>
                        &nbsp;&nbsp;一共&nbsp;[[${pageInfo.getPages()}]]&nbsp;页
                    </li>
                </ul>
            </nav>


            <!--            -->

            <!--        archive-->

            <div class="layui-row layui-col-space10" th:if="${isArchive} eq 'true'">
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">归档日期</div>
                        <div class="layui-card-body">
                            <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <ul class="layui-timeline">
                                            <li class="layui-timeline-item" th:each="archive:${archives}">
                                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                <div class="layui-timeline-content layui-text">
                                                    <h3 class="layui-timeline-title">
                                                        <a href="#" style="color: black;text-decoration: none;" th:onclick="archiveChange([[${archive.months}]])">
                                                        [[${archive.months}]]
                                                        </a>
                                                    </h3>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md8">
                    <div class="layui-card">
                        <div class="layui-card-header">归档文章&nbsp;&nbsp;
                            (<span id="date" style="color: #2D8CF0">[[${date}]]</span>)
                        </div>
                        <div class="layui-card-body">
                            <ul class="list">
                                <div id="archivelist">
                                <li class="list-item layui-card" th:each="art:${oneArticle}">
                                    <a th:href="${commons.permalink(art.id)}" target="_blank">
                                    <span class="title">[[${art.title}]]</span>
                                    </a>
                                </li>
                                </div>
                            </ul>

                        </div>
                    </div>

                </div>
            </div>


        </div>
        <div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title" th:if="${userDetail} ne null" th:text="${userDetail.getJob()}"></div>
                    <div style="text-align: center;" class="right-card-title" th:if="${userDetail} eq null">请登录</div>
                    <div class="cl-code">
                        <img th:src="@{/user_img/user_default.jpg}" alt="about me" class="img-fluid"
                             th:if="${userDetail} eq null or ${userDetail.getIcon()} eq '' or ${userDetail.getIcon()} eq null  ">
                        <img th:src="${userDetail.getIcon()}" alt="about me" class="img-fluid"
                             th:if="${userDetail} ne null and  ${userDetail.getIcon()} ne '' and  ${userDetail.getIcon()} ne null">

                    </div>

                </div>
            </div>


            <!--            推荐-->
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">推荐文章</div>
                    <ul class="right-recommended-list">
                        <li th:each="recommend:${recommends}">
                            <a th:href="${commons.permalink(recommend.id)}" target="_blank">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <span th:text="${recommendStat.index+1}+'、'+${recommend.title}"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">阅读排行榜</div>
                    <!--                    <div class="right-recommended"><a href="#"><img src="#" class="img-fluid" alt=""></a></div>-->
                    <ul class="right-recommended-list">
                        <li th:each="articleOrder :${articleOrders}">
                            <a th:href="@{'/article/'+${articleOrder.id}}" target="_blank">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <span th:text="${articleOrderStat.index+1}+'、'+${articleOrder.title}+'('+${articleOrder.statistic.hits}+')'"></span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">热门标签</div>
                    <ul class="label">
                        <li th:each="tag:${tags}">
                            <a href="#" th:text="${tag.getTagName()}+'('+${tag.getTagCount()}+')'"></a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">友情链接</div>
                    <ul class="label">
                        <li th:each="link:${links}">
                            <a th:href="${link.getLink()}" th:text="${link.getTitle()}" target="_blank"></a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>




    </div>


</div>

<div class="container-fluid cl-footer">
    <div class="container">
        <p class="cl-copyright" th:if="${setting} eq null or ${setting.foot} eq null">2021 &copy; Powered By 游政杰</p>
        <p class="cl-copyright" th:if="${setting} ne null and ${setting.foot} ne null" th:text="${setting.foot}"></p>
    </div>
</div>
<script th:inline="javascript">


    hljs.initHighlightingOnLoad();

    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }


    /*单击出现爱心特效*/
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
        }
    })(window, document);


    //点赞
    function lk(id) {
        let header = $("meta[name='_csrf_header']").attr("content");
        let token = $("meta[name='_csrf']").attr("content");
        $.ajax({
            url: "/like/art",
            data: {
                "article_id": id
            },
            type: "POST",
            beforeSend: function (xhr) {
                xhr.setRequestHeader(header, token);
            },
            success: function (data) {
                if (data.length > 6000) { //data是被SpringSecurity拦截的页面，大小肯定大于6000，我们便可以手动跳转页面
                    window.location.href = "/loginPage";
                    return;
                }
                var json = JSON.parse(data);
                if (json.result == 200) {
                    $('#alike' + id).css('color', 'red'); //修改点赞颜色

                    $('#likecount' + id).text(json.data)
                    $('#')
                    // alert('点赞成功');
                } else {
                    alert('点赞失败');
                }

            }

        });

    }


    function toPage() {
        window.location.href = '/page/' + $('#t1').val();
    }


    //ajax局部刷新归档数据
    function archiveChange(date) {
        $.ajax({
            url: "/archive/data",
            data: {
                "date": date
            },
            type: "GET",
            success: function (data) {
                var obj = JSON.parse(data); //将前端传的list集合的json转成list集合
                console.log(obj)
                console.log(obj.length)

                document.getElementById('date').innerHTML=date; //修改日期
                var html='';

                for (let i = 0; i < obj.length; i++) {
                    let hf= '/article/'+obj[i].id;
                    html+='<li class="list-item layui-card">'+'<a href="'+hf+'" target="_blank">'
                        +'<span class="title">'+obj[i].title+'</span>'+'</a>'+'</li>'
                }

                document.getElementById('archivelist').innerHTML=''

                $('#archivelist').append(html);

            }

        });


    }




    // /*背景雪花飘落特效*/
    // (function($){
    //     $.fn.snow=function(options){
    //         var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:20,maxSize:40,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);
    //         var interval=setInterval(function(){
    //             var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){
    //                 $(this).remove()
    //             });
    //         },options.newOn);
    //     };
    // })(jQuery);
    // $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#2894FF' });

</script>
</body>
</html>